<template>
<div class="wrapper" ref="wrapper">
    <div class="content">
        <dl v-for="item in msg">
            <dt>
                <img :src="item.imgUrl" alt="">
            </dt>
            <dd>{{item.text}}</dd>
        </dl>


    </div>
    </div>
</template>
<script>
// import BScroll from 'better-scroll';
export default {
     props:["msg"],
   
    // mounted() {
    //   this.$nextTick(() => {
    //     this.scroll = new Bscroll(this.$refs.wrapper, {})
    //   })
    // }

}
</script>
<style scoped lang="scss">
@function pxTwo($font){
    @return $font*2.6666666666
};
div{
    width: 100%;
   height: pxTwo(.8rem);
    border-top: pxTwo(.01rem) solid #ccc; 
       overflow: auto;
}
.content{
    width: 320%;
    height: 98%;
    display: flex;
     
    dl{
        width: pxTwo(1rem);
        height: 100%;
        display: flex;
        flex-direction: column;
        dt{
            width: 50%;
            height: 50%;
            margin: 0 auto;
            margin-top: pxTwo(.1rem);
            img{
                width: 100%;
                height: 100%;
            }
        }
        dd{
            width: 100%;
            flex: 1;
           justify-content: center;
            display: flex;
            align-items: center;
            font-size: 12px;
        }
    }
}


</style>


